import { Graph, Path } from '@antv/x6';
import { h } from 'vue';
import '@antv/x6-vue-shape'
import { useTeleport } from '@antv/x6-vue-shape'
import Entity from './Entity';

export const modelGraphViewId = 'model-graph-view-id'

// 注册一个自定义组件
Graph.registerNode('entity', {
  inherit: 'vue-shape',
  view: modelGraphViewId,
  x: 200,
  y: 150,
  width: 190,
  height: 80,
  component: {
    render: () => h(Entity),
  },
})

// 这个是为了提升自定义节点渲染性能的
export const TeleportContainer = useTeleport(modelGraphViewId)

// 连接器
Graph.registerConnector(
  'mindmap',
  (sourcePoint, targetPoint, routerPoints, options) => {
    const midX = sourcePoint.x + 0
    const midY = sourcePoint.y
    const ctrX = (targetPoint.x - midX) / 5 + midX
    const ctrY = targetPoint.y
    const pathData = `
     M ${sourcePoint.x} ${sourcePoint.y}
     L ${midX} ${midY}
     Q ${ctrX} ${ctrY} ${targetPoint.x} ${targetPoint.y}
    `
    return options.raw ? Path.parse(pathData) : pathData
  },
  true,
)

// 边
Graph.registerEdge(
  'mindmap-edge',
  {
    inherit: 'edge',
    connector: {
      name: 'mindmap',
    },
    attrs: {
      line: {
        // targetMarker: ,
        stroke: '#3C6EFF ',
        strokeWidth: 1,
        strokeDasharray: 5,
      },
    },
    zIndex: 0,
  },
  true,
)
